<template>
  <div class="child-container">
      <h2>这是子组件</h2>
      <label>{{ messageRef }}</label>
      <input class="parent-input"  v-model="messageRef" />
    </div>
</template>

<script setup>
  import { ref,defineExpose } from 'vue';
  const messageRef = ref('Hello from parent!');//--RefImpl类型
  const changeUpperMessage =()=>{
   let res=""
   let text = messageRef.value;
    for (let i = 0; i < text.length; i++) {
    if (text[i] >= 'a' && text[i] <= 'z') {
      res += text[i].toUpperCase();
    } else {
      res += text[i];
    }
  }
  messageRef.value =res;
  }
// 暴露内部状态和改变状态的方法
defineExpose({
    messageRef,
    changeUpperMessage
});
</script>

<style>
 .child-container{
   border-width: 1px; /* 边框宽度为2像素 */
    border-style: solid; /* 边框样式为实线 */
    min-height: 100px;
    padding: 10px;
}
</style>